import React from 'react'
import Header from '@/components/Layout/Header'
import CCarsousel from '@/components/Layout/Carsousel'
import Footer from '@/components/Layout/Footer'
import { Container,Tabs,Tab } from "@/core"
import "./Home.less"

// const news = [
//     {title:"公司承建连云港大埔污水处理厂项目获业主发函感谢",img:"./img/nav_top1.jpg"},
// ]
// const infos = [
//     {
//         title:"市政建设",
//         content:"公司紧跟国家政策导向，深度参与各地市政工程建设，业务涵盖公路桥梁、道路管网、城市绿道、滨河景观等。",
//         img:"./img/nav_top4.jpg"
//     }
// ]

class Home extends React.Component {

    loadNews = ()=>{
        Promise.all([
            _.api("page.articleList",{params:{"categoryId":1,count:6}}),
            _.api("page.articleList",{params:{"categoryId":3,count:6}}),
            _.api("page.articleList",{params:{"categoryId":5,count:100}})
        ]).then(([res1,res2,res3])=>{
            if(!res1){
                return;
            }
            // 公司要闻
            this.state.specialList1 = res1.list;
            // 专题专栏
            this.state.specialList2 = res2.list;
            //
            if(res3.list.length>2){
                res3.list.push(res3.list[0]);
                res3.list.push(res3.list[1]);
                this.state.infos = res3.list;
            }
            this.forceUpdate();
        })
    }

    showNews = (offset)=>{
        let news = this.state.specialList1;
        let idx = this.state.newsIdx + offset;
        idx < 0 && (idx = news.length - 1);
        idx >= news.length && (idx = 0);
        this.setState({newsIdx:idx})
    }

    specialTabChange = (e,newValue)=>{
        this.setState({
            specialTab:newValue
        })
    }

    nextInfos = (flag)=>{
        let st = this.state;
        let index = st.infosIndex + flag;
        index == -1 && (index = st.infos.length - 3);
        index > (st.infos.length - 3) && (index = 0);
        this.setState({infosIndex: index});
    }

    state = {
        newsIdx:0,
        specialTab:0,
        specialList1:[],
        specialList2:[],
        infos:[],
        infosIndex:0,
        navIdx:0,
        navData:[]
    }

    componentDidMount(){
        this.loadNews();
    }

    render(){
        let st = this.state;
        let newItem = st.specialList1[st.newsIdx] || {showImage:'./img/nav_top1.jpg',title:''};
        let infos = st.infos.slice(st.infosIndex,st.infosIndex+3);
        return (
            <React.Fragment>
                <Header/>
                <CCarsousel />
                <Container className="news flr row_pd2" >
                    <div className="flbox">
                        <div className="news_area1 backgroundColor">
                            <div className="image" style={{backgroundImage:`url(${global.http+newItem.showImage})`}} onClick={()=>_.his.push(`/listDetail/${newItem.categoryId}/${newItem.id}`)}>
                                <div className="title">{newItem.title}</div>
                            </div>
                            <div className="btns">
                                <div className="left_btn fl-center" onClick={()=>this.showNews(-1)}>
                                    <svg t="1660361610995" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="3130" width="64" height="64">
                                        <path
                                            d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
                                            p-id="3131"></path>
                                    </svg>
                                </div>
                                <div className="right_btn fl-center" onClick={()=>this.showNews(1)}>
                                    <svg t="1660362086047" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="5741" width="64" height="64">
                                        <path
                                            d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"
                                            p-id="5742"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flbox">
                        <div className="news_area2 backgroundColor">
                            <Tabs
                                value={st.specialTab}
                                onChange={this.specialTabChange}
                                variant="scrollable"
                                aria-label=""
                            >
                                <Tab label="公司要闻" />
                                <Tab label="专题专栏" />
                            </Tabs>
                            {
                                st.specialTab==0 ? (
                                    <div className="content">
                                        {
                                            st.specialList1.map((v,i)=>{
                                                return (
                                                    <div className="item" key={i}>
                                                        <div className="flr fl-middle" onClick={()=>_.his.push(`/listDetail/${v.categoryId}/${v.id}`)}>
                                                            <div className="flbox text">{v.highlightContent}</div>
                                                            <div className="flone date">[{_.MOMENT(v.created).format("MM-DD")}]</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                ):(
                                    <div className="content">
                                        {
                                            st.specialList2.map((v,i)=>{
                                                return (
                                                    <div className="item" key={i}>
                                                        <div className="flr fl-middle" onClick={()=>_.his.push(`/listDetail/${v.categoryId}/${v.id}`)}>
                                                            <div className="flbox text">{v.highlightContent}</div>
                                                            <div className="flone date">[{_.MOMENT(v.created).format("MM-DD")}]</div>
                                                        </div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                )
                            }
                        </div>
                    </div>
                    <div className="flbox">
                        <div className="news_area3 backgroundColor">
                            <Tabs
                                value={0}
                                variant="scrollable"
                                scrollButtons=""
                                aria-label=""
                            >
                                <Tab label="OA系统" />
                            </Tabs>
                            <div className="content">
                                <div className="oa image" onClick={()=>_.his.push('/login')}></div>
                            </div>
                        </div>
                    </div>
                </Container>

                <Container className="infos flr row_pd1">
                    {
                        infos.map((v,i)=>{
                            return (
                                <div className="item flbox backgroundColor fl"  key={i}>
                                    <div><img className="image" src={global.http+v.showImage}/></div>
                                    <article>
                                        <div className="link title">{v.title}</div>
                                        <div className="memo" dangerouslySetInnerHTML={{__html:v.content}}></div>
                                    </article>
                                </div>
                            )
                        })
                    }
                    <div className="btns">
                        <div className="left_btn fl-center" onClick={()=>this.nextInfos(-1)}>
                            <svg t="1660361610995" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="3130" width="64" height="64">
                                <path
                                    d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z"
                                    p-id="3131"></path>
                            </svg>
                        </div>
                        <div className="right_btn fl-center" onClick={()=>this.nextInfos(+1)}>
                            <svg t="1660362086047" className="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5741" width="64" height="64">
                                x                <path
                                d="M332.091514 74.487481l-75.369571 89.491197c-10.963703 12.998035-10.285251 32.864502 1.499144 44.378743l286.278095 300.375162L266.565125 819.058374c-11.338233 12.190647-11.035334 32.285311 0.638543 44.850487l80.46666 86.564541c11.680017 12.583596 30.356378 12.893658 41.662889 0.716314l377.434212-421.426145c11.332093-12.183484 11.041474-32.266891-0.657986-44.844348l-80.46666-86.564541c-1.772366-1.910513-3.706415-3.533476-5.750981-4.877077L373.270379 71.774697C361.493148 60.273758 343.054193 61.470003 332.091514 74.487481z"
                                p-id="5742"></path>
                            </svg>
                        </div>
                    </div>
                </Container>
                <Footer/>
            </React.Fragment>
        )
    }
}

export default Home;

